<template>
    <el-row>
        <el-col :span="17" :offset="1">
            <!-- 左边 -->
            <div>
                <!-- 标题 -->
                <h2>{{ currentNews.title }}</h2>
                <!-- 时间 -->
                <div class="time">
                    {{ whichTime(currentNews.editTime) }}
                </div>
                <!-- 分割线 -->
                <el-divider>
                    <el-icon><star-filled /></el-icon>
                </el-divider>
                <!-- 内容 -->
                <div v-html="currentNews.content"></div>
            </div>
        </el-col>
        <el-col :span="4" :offset="1" :pull="1">
            <!-- 右边 -->
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span style="font-size: 18px; font-weight: 800">最近动态</span>
                    </div>
                </template>
                <div
                    style="padding: 15px"
                    @click="handleChange(item._id)"
                    v-for="item in topNews"
                    :key="item._id"
                    class="text item"
                >
                    <span class="tab-title">{{ item.title }}</span>
                    <div class="bottom">
                        <time class="time">{{ whichTime(item.editTime) }}</time>
                    </div>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>
import { StarFilled } from '@element-plus/icons-vue';
import { ref, watchEffect, onBeforeUnmount } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute } from 'vue-router';
import router from '@/router';
moment.locale('zh-cn');
const whichTime = time => {
    return moment(time).format('llll');
};
const topNews = ref([]);
const route = useRoute();
//接收数据的遍历
const currentNews = ref({});
const stop = watchEffect(async () => {
    //添加判断 如果取反为真 停止运行代码发送请求
    if (!route.params.id) return;
    const res = await axios(`/webapi/news/list/${route.params.id}`);
    const result = await axios(`/webapi/news/toplist?limit=5`);
    currentNews.value = res.data.data[0];
    topNews.value = result.data.data;
});
//跳转
const handleChange = id => {
    router.push(`/new/${id}`);
};
//销毁页面之前触发
onBeforeUnmount(() => {
    //卸载之前取消监听
    stop();
});
</script>

<style lang="scss" scoped>
.el-row {
    margin-top: 30px;
    .time {
        font-size: 13px;
        color: gray;
    }
}
</style>
